<template>
  <el-container class="main-container">
<!--    <el-header class="header">-->
<!--      <h1>Chat-Robot</h1>-->
<!--    </el-header>-->
    <!-- 左侧对话列表 -->
    <el-aside width="250px" class="left-panel">
      <div class="dialog-header">
        <el-button type="primary" @click="createNewDialog">新建对话</el-button>
      </div>
      <el-scrollbar class="dialog-list">
        <el-menu
            :default-active="activeDialog"
            @select="handleDialogSelect"
        >
          <el-menu-item
              v-for="dialog in dialogs"
              :key="dialog.id"
              :index="dialog.id"
              class="dialog-item"
          >
            <span>{{ dialog.title }}</span>
<!--            <el-button-->
<!--                type="text"-->
<!--                icon="el-icon-close"-->
<!--                class="delete-btn"-->
<!--                @click.stop="deleteDialog(dialog.id)"-->
<!--            ></el-button>-->
            <div class="action-buttons">
              <el-button
                  type="text"
                  icon="el-icon-edit"
                  class="edit-btn"
                  @click.stop="renameDialog(dialog.id)"
              ></el-button>
              <el-button
                  type="text"
                  icon="el-icon-close"
                  class="delete-btn"
                  @click.stop="deleteDialog(dialog.id)"
              ></el-button>
            </div>
          </el-menu-item>
        </el-menu>
      </el-scrollbar>
    </el-aside>

    <!-- 右侧聊天区域 -->
    <el-main class="right-panel">
      <div v-if="activeDialog" class="chat-container">
        <el-scrollbar class="message-area" ref="scrollbar">
          <div
              v-for="(msg, index) in activeMessages"
              :key="index"
              class="message-wrapper"
              :class="{'user-message': msg.role === 'user', 'bot-message': msg.role === 'bot'}"
          >
            <div class="message-bubble">
              {{ msg.content }}
            </div>

<!--            <div class="message-content">-->
<!--              <div class="message-header">-->
<!--                <span class="role">{{ msg.role === 'user' ? 'You' : 'AI' }}</span>-->
<!--              </div>-->
<!--              <div class="message-bubble">-->
<!--                {{ msg.content }}-->
<!--              </div>-->
<!--            </div>-->
          </div>
        </el-scrollbar>

        <div class="input-area">
          <el-input
              v-model="inputMessage"
              type="textarea"
              :rows="3"
              placeholder="输入你的消息..."
              @keyup.enter.native="sendMessage"
          ></el-input>
          <el-button
              type="primary"
              @click="sendMessage"
              class="send-btn"
          >发送</el-button>
        </div>
      </div>

      <div v-else class="empty-state">
        请选择或新建一个对话
      </div>
    </el-main>
  </el-container>
</template>
<script>
import axios from "axios";

export default {
  name: "ChatWindow3.vue",
  data() {
    return {
      dialogs: [],
      activeDialog: null,
      inputMessage: '',
      dialogCounter: 1
    }
  },
  watch: {
    dialogs: {
      handler(newVal) {
        // 自动保存到localStorage
        localStorage.setItem('chat-dialogs', JSON.stringify(newVal))
      },
      deep: true
    }
  },
  created() {
    // 初始化时加载存储的对话
    const savedDialogs = localStorage.getItem('chat-dialogs')
    if (savedDialogs) {
      this.dialogs = JSON.parse(savedDialogs)
      // 恢复最后活跃的对话
      if (this.dialogs.length > 0) {
        this.activeDialog = this.dialogs[0].id
      }
    }
  },
  computed: {
    activeMessages() {
      const dialog = this.dialogs.find(d => d.id === this.activeDialog);
      return dialog ? dialog.messages : [];
    }
  },
  methods: {
    createNewDialog() {
      const newDialog = {
        id: Date.now(),
        title: `对话 ${this.dialogCounter++}`,
        messages: [],
        createdAt: new Date().toISOString()
      }
      this.dialogs.unshift(newDialog)
      this.activeDialog = newDialog.id
    },
    deleteDialog(dialogId) {
      const index = this.dialogs.findIndex(d => d.id === dialogId);
      this.dialogs.splice(index, 1);
      if (this.activeDialog === dialogId) {
        this.activeDialog = this.dialogs[0]?.id || null;
      }
    },
    handleDialogSelect(index) {
      this.activeDialog = index;
    },
    sendMessage() {
      if (!this.inputMessage.trim()) return;
      const message = {
        role: 'user',
        content: this.inputMessage.trim()
      };
      const dialogIndex = this.dialogs.findIndex(d => d.id === this.activeDialog);
      this.dialogs[dialogIndex].messages.push(message);

      // 模拟机器人回复
      setTimeout(() => {
        this.dialogs[dialogIndex].messages.push({
          role: 'bot',
          content: '这是模拟回复'
        });
        this.scrollToBottom();
      }, 500);

      this.inputMessage = '';
      this.scrollToBottom();
    },
    scrollToBottom() {
      this.$nextTick(() => {
        const scrollbar = this.$refs.scrollbar;
        if (scrollbar) {
          scrollbar.wrap.scrollTop = scrollbar.wrap.scrollHeight;
        }
      });
    },
    renameDialog(dialogId) {
      const dialog = this.dialogs.find(d => d.id === dialogId)
      this.$prompt('请输入新对话名称', '重命名对话', {
        inputValue: dialog.title,
        inputValidator: (value) => {
          if (!value.trim()) return '名称不能为空'
          return true
        }
      }).then(({ value }) => {
        dialog.title = value.trim()
        this.$message.success('重命名成功')
      }).catch(() => {
        this.$message.info('已取消重命名')
      })
    },
  }
}
</script>

<style scoped>
.main-container {
  height: 100vh;
}

.left-panel {
  border-right: 1px solid #e6e6e6;
  background: #f5f5f5;
}

.dialog-header {
  padding: 15px;
  border-bottom: 1px solid #e6e6e6;
}

.dialog-list {
  height: calc(100vh - 60px);
}

.dialog-item {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/*.delete-btn {*/
/*  position: absolute;*/
/*  right: 10px;*/
/*  padding: 0;*/
/*  color: #999;*/
/*}*/

.right-panel {
  padding: 0;
  background: #fff;
}

.chat-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.message-area {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

.message-wrapper {
  margin: 10px 0;
}

.message-bubble {
  max-width: 70%;
  padding: 12px 16px;
  border-radius: 8px;
  word-break: break-word;
}

.user-message {
  display: flex;
  justify-content: flex-end;
}

.user-message .message-bubble {
  background: #409eff;
  color: white;
}

.bot-message {
  display: flex;
  justify-content: flex-start;
}

.bot-message .message-bubble {
  background: #f5f5f5;
  color: #333;
}

.input-area {
  border-top: 1px solid #e6e6e6;
  padding: 20px;
  position: relative;
}

.send-btn {
  margin-top: 10px;
  float: right;
}

.empty-state {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  color: #999;
}
.action-buttons {
  position: absolute;
  right: 5px;
  display: none;
}

.dialog-item:hover .action-buttons {
  display: block;
}

.edit-btn {
  padding: 0 5px;
  color: #666;
}

.delete-btn {
  padding: 0 5px;
  color: #999;
}


</style>